{layout:main}
{css href=@dialog.css}
{js src=@jquery.dialog.min.js}
{js src=@jquery.cookie.js}
{$navigation=content:model=navigation name=content}
{>js}
bindNavigation({$navigation});
{/>}
<div class="container">
    <div class="row site-bg" style="background-image:url({$cat.image});">
        <div class="col-md-12">
            <div class="search-box">
                <div class="search-input">
                    <span class="search-icon"></span>
                    <input type="text" placeholder="请输入关键字，按回车 / Enter 搜索">
                    <button class="search-btn">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
                <div class="search-tips">
                    <ul>
                    </ul>
                </div>
                <div class="search-engine">
                    <div class="search-engine-header">
                        <span class="title">选择您的默认搜索引擎：</span>
                        <div class="search-engine-tool">
                            搜索热词： 
                            <span class="toggle-box checked"></span>
                        </div>
                    </div>
                    <ul class="search-engine-body">
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="panel self-box">
                <div class="panel-header">
                    <span>你的导航</span>

                    <div class="custom-btn">
                        <i class="fa fa-cog"></i>
                        自定义
                    </div>
                    <div class="add-btn">
                        <i class="fa fa-plus"></i>
                        添加
                    </div>
                </div>
                <div class="panel-body">
                    <div class="group-item">
                        <div class="group-name">资讯</div>
                        <div>
                            <a href="https://weibo.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                微博
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://tieba.baidu.com" class="site-item">
                                <i class="fa fa-times"></i>
                                百度贴吧
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="http://www.ifeng.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                凤凰网
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.ithome.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                IT之家
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                    </div>
                    <div class="group-item">
                        <div class="group-name">学习</div>
                        <div>
                            <a href="https://translate.google.cn/" class="site-item">
                                <i class="fa fa-times"></i>
                                Google 翻译
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.w3school.com.cn/" class="site-item">
                                <i class="fa fa-times"></i>
                                W3 School
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://study.163.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                网易云课堂
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://stackoverflow.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                StackOverflow
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://github.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                Github
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.zcool.com.cn/" class="site-item">
                                <i class="fa fa-times"></i>
                                站酷
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://huaban.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                花瓣
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                    </div>
                    <div class="group-item">
                        <div class="group-name">娱乐</div>
                        <div>
                            <a href="https://music.163.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                网易云音乐
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://y.qq.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                QQ音乐
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.bilibili.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                哔哩哔哩
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://v.qq.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                腾讯视频
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.youku.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                优酷
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                    </div>
                    <div class="group-item">
                        <div class="group-name">购物</div>
                        <div>
                            <a href="https://www.taobao.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                淘宝
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="https://www.jd.com/" class="site-item">
                                <i class="fa fa-times"></i>
                                京东
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn">本 地 保 存</a>
                    <a href="javascript:;" class="btn">云 端 保 存</a>
                    <a href="javascript:;" class="btn">恢 复 默 认</a>
                    <a href="javascript:;" class="btn panel-close">关 闭 面 板</a>
                </div>
            </div>
        </div>
    </div>
    {if:$cat.id != 13}
    <div class="panel site-panel">
        <div class="panel-header">
            <i class="{$cat.thumb}"></i>
            <span>{$cat.title}</span>
        </div>
        <div class="panel-body">
            {contents:category=$cat.id num=20 field=id,cat_id,model_id,title,description,thumb,uri}
            <div  class="site-item" title="{$content.title}-{$content.description}">
                <div class="item-name">
                    <a href="{url:$content}"><img  class="lazy" src="/assets/images/thumb.jpg" data-src="{$content.thumb}" alt="{$content.title}"></a>
                    <a href="{url:$content}">{$content.title}</a>
                </div>
                <div class="item-desc">{this.text:$content.description,20}</div>
                {if:$content.uri}
                <a class="go-btn" href="{redirect:$content.uri}" target="_blank" rel="noopener noreferrer" title="直接访问">
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
                {/if}
            </div>
            {/contents}
        </div>
    </div>
    {/if}
    {channels:parent=$cat.id}
    <div class="panel site-panel">
        <div class="panel-header">
            <i class="{$channel.thumb}"></i>
            <span>{$channel.title}</span>
        </div>
        <div class="panel-body">
            {contents:category=$channel.id num=20 field=id,cat_id,model_id,title,description,thumb,uri}
            <div  class="site-item" title="{$content.title}-{$content.description}">
                <div class="item-name">
                    <a href="{url:$content}"><img  class="lazy" src="/assets/images/thumb.jpg" data-src="{$content.thumb}" alt="{$content.title}"></a>
                    <a href="{url:$content}">{$content.title}</a>
                </div>
                <div class="item-desc">{this.text:$content.description,20}</div>
                {if:$content.uri}
                <a class="go-btn" href="{redirect:$content.uri}" target="_blank" rel="noopener noreferrer" title="直接访问">
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
                {/if}
            </div>
            {/contents}
        </div>
    </div>
    {/channels}
</div>

<div id="add-box" class="dialog dialog-box" data-type="dialog">
    <div class="dialog-header">
        <div class="dialog-title">修改导航</div><i class="fa fa-close dialog-close"></i>
    </div>
    <div class="dialog-body form-table">
        <div class="input-group">
            <label for="group">分组</label>
            <div>
                <select id="group" name="group">
                    <option>分组</option>
                </select>
            </div>
        </div>
        <div class="input-group">
                <label for="name">名称</label>
                <div>
                    <input type="text" id="name" class="form-control " name="name" value="" placeholder="请输入 名称">
                </div>
            </div>
        <div class="input-group">
                <label for="link">链接</label>
                <div>
                    <input type="text" id="link" class="form-control " name="link" value="" placeholder="请输入 网址" >
                </div>
            </div>
    </div>
    <div class="dialog-footer">
        <button type="button" class="dialog-yes">确认</button>
        <button type="button"
            class="dialog-close">取消</button>
    </div>
</div>